<template>
<div class="manage">
  <!-- 添加用户的对话框 -->
  <el-dialog
      title="新增用户"
      :visible.sync="isShow01"
      @close="addDialogClosed"
      width="50%"
  >
    <el-form
      :model="addUserForm"
      ref="addUserFormRef"
      label-width="70px"
    >
      <el-form-item label="用户ID" prop="userID">
        <el-input v-model="addUserForm.userID"></el-input>
      </el-form-item>
      <el-form-item label="用户名" prop="name">
        <el-input v-model="addUserForm.name"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="addUserForm.password"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select v-model="addUserForm.sex" placeholder="请选择">
          <el-option
            v-for="item in sexOpts"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="身份" prop="identity">
        <el-select v-model="addUserForm.identity">
          <el-option
            v-for="item in idenOpts"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
          </el-select> 
      </el-form-item></el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShow01 = false">取消</el-button>
        <el-button type="primary" @click="userAdd">确定</el-button>
      </div>
    </el-dialog>
    <!-- 修改用户的对话框 -->
    <el-dialog
      title="编辑用户"
      width="50%"
      :visible.sync="isShow02"
      @close="editDialogClosed"
  >
    <el-form
      :model="addUserForm"
      ref="editUserFormRef"
      label-width="70px"
    >
      <el-form-item label="用户ID" prop="userID">
        <el-input v-model="addUserForm.userID"></el-input>
      </el-form-item>
      <el-form-item label="用户名" prop="name">
        <el-input v-model="addUserForm.name"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="addUserForm.password"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select v-model="addUserForm.sex" placeholder="请选择">
          <el-option
            v-for="item in sexOpts"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="身份" prop="identity">
        <el-select v-model="addUserForm.identity" placeholder="请选择">
          <el-option
            v-for="item in idenOpts"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
          </el-select> 
      </el-form-item></el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShow02 = false">取消</el-button>
        <el-button type="primary" @click="userEdit">确定</el-button>
      </div>
    </el-dialog>
    <div class="manage-header">
      <el-button type="primary" @click="addDialog">+ 新增</el-button>
      <!-- 搜索框 -->
      <el-form :inline="true">
        <el-form-item>
          <el-input v-model="input" placeholder="请输入用户ID" inline="true"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary " @click="searchUser()">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      show-overflow-tooltip
      height="500px"
      :data="userList"
      stripe border
    >
      <el-table-column type="index" width="100"></el-table-column>
      <el-tableColumn label="用户ID" prop="userID" width="180"></el-tableColumn>
      <el-tableColumn label="用户名" prop="name" width="180"></el-tableColumn>
      <el-tableColumn label="性别" prop="sex" width="180"></el-tableColumn>
      <el-tableColumn label="身份" prop="identity" width="180"></el-tableColumn>
      <el-tableColumn label="操作" min-width="180px">
        <template slot-scope="scope">
          <el-button size="mini" @click="editDialog(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="userDel(scope.row)">删除</el-button>
        </template>
      </el-tableColumn>
    </el-table>
    <!-- <el-pagination
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-size="queryInfo.pagesize"
      layout="prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination> -->
    
  </div>
</template>
<script>
import CommonForm from "../../components/CommonForm.vue"
import CommonTable from '../../components/CommonTable.vue'
export default {
  name: "users",
  components: {
    CommonForm,
    CommonTable
  },
  data() {
    return {
      isShow01: false,
      isShow02: false,
      total:0,
      userList:[],
      input:'',
      queryInfo:{
        query:'',
        pagenum:1,
        pagesize:5
      },
      sexOpts: [{
        value: '男',
        label: '男'
      }, {
        value: '女',
        label: '女'
      }],
      idenOpts: [{
        value: '管理员',
        label: '管理员'
      }, {
        value: '老师',
        label: '老师'
      },{
        value: '学生',
        label: '学生'
      }],
      value: '',
      addUserForm: {
        userID:'',
        name: '',
        password: '',
        sex: '',
        identity: '',
      },
      searchFrom: {
        keyword: "",
      },
    }
  }, 
  created() {
    this.getUserList()
  },
  methods: {
    handleCurrentChange(val){
      this.pageNum = val;
      this.query();
    },
    async getUserList() {
      const { data: res } = await this.$http.get('page/userList', {
        params: this.queryInfo,
      })
      this.userList = res.data
      this.total = res.total
      console.log(res)
    },
    // 确认添加用户方法
    async userAdd(){
      var me = this;
      const data = {
        userID: me.addUserForm.userID,
        name:me.addUserForm.name,
        sex:me.addUserForm.sex,
        password: me.addUserForm.password,
        identity:me.addUserForm.identity,
      }
      console.log(data)
      const {data:res}= await me.$http.post('page/adduser', me.$qs.stringify(data),Headers)
      console.log(res)
      if(res.status==1){
          this.$message({
              type: 'warning',
              message: res.message
          });
      }
      if(res.status==0){
        this.$message({
            type: 'success',
            message: res.message
        });
        me.isShow01 = false;
        me.getUserList();
      }

    },
    // 编辑用户信息
    async userEdit(){
      var me = this;
      const data = {
        userID: me.addUserForm.userID,
        name:me.addUserForm.name,
        sex:me.addUserForm.sex,
        password: me.addUserForm.password,
        identity:me.addUserForm.identity,
      }
      console.log(data)
      const {data:res}= await me.$http.post('page/edituser', me.$qs.stringify(data),Headers)
      console.log(res)
      if(res.status==1){
          this.$message({
              type: 'warning',
              message: res.message
          });
      }
      if(res.status==0){
        this.$message({
            type: 'success',
            message: res.message
        });
        me.isShow02 = false;
        me.getUserList();
      }
    },
    // 删除用户信息
    userDel(row){
      var me = this;
      this.$confirm("是否将该用户移除","提示",{
        confirmButtonText:"确认",
        cancelButtonText:'取消',
        type:"warning"
      }).then(()=>{
        const id =row.userID
        console.log(id)
        me.$http.get("/page/deluser/"+id,{})
        me.getUserList();
        me.$message({
            type: 'success',
            message: '删除成功'
        });
      })
    },
    // 查询用户信息
    async searchUser() {
      const id = this.input
      const { data: res } = await this.$http.get('page/searchuser/'+id, {
        params: this.queryInfo,
      })
      this.userList = res.data
      this.total = res.total
      console.log(res)
    },
    // 新增弹窗
    addDialog() {
      (this.isShow01 = true),
      (this.operateType = "add"),
      (this.addUserForm ={
        userID:'',
        name: '',
        password: '',
        sex: '',
        identity: '',
      });
    },
    // 编辑弹窗
    editDialog(row){
      this.isShow02=true
      this.addUserForm=row
      this.$http.post('page/edituser',this.addUserForm).then(res=>{
          console.log(res)
          this.getUserList()
      })
    },
    // 监听pageSize改变的事件
    handleSizeChange(newSize) {
      console.log(newSize)
      this.queryInfo.pagesize = newSize
      this.getUserList()
    },
    // 监听page页码值改变的事件
    handleCurrentChange(newPage) {
      console.log(newPage)
      this.queryInfo.pagenum = newPage
      this.getUserList()
    },
    addDialogClosed() {
      this.$refs.addUserFormRef.resetFields()
    },
    editDialogClosed() {
      this.$refs.editUserFormRef.resetFields()
    },
  },
};
</script>
<style hang="less" scoped>
.manage-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px;
}
.userTable{
    margin: 40px;
}
</style>